<template>
    <el-scrollbar class="behavior">
        <div v-if="Data.list.length">
            <el-tree
                :infinite-scroll-disabled="disabled"
                v-infinite-scroll="load"
                :default-expand-all="false"
                :data="Data.list"
                node-key="date"
                :default-expanded-keys="Data.openDate"
                @node-expand="expandNodes"
                @node-collapse="collapseNodes"
                :props="defaultProps">
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span v-if="node.level === 1">
                            <span class="date">{{ format(data.date, 'YYYY/MM/DD') }}</span>
                            <i
                                class="el-icon el-tree-node__expand-icon own"
                                :style="{ transform: data.down ? ' rotate(90deg) ' : ' rotate(-90deg) ' }"
                                ><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M384 192v640l384-320.064z"></path></svg
                            ></i>
                            <span class="count">
                                行为统计：
                                <span class="color_ff6">
                                    {{ data.behaviourNum }}
                                </span>
                                次
                            </span>
                        </span>
                        <div v-if="node.level === 2" class="detail">
                            <div>
                                <span class="time"> {{ data.dateTime }}</span>
                            </div>
                            <div>
                                <div class="content" v-for="(item, index) in data.behaviour" :key="index">
                                    {{ item.behaviourName }} {{ item.behaviourContent ? ' | ' : ''
                                    }}{{ item.behaviourContent }}
                                </div>
                            </div>
                        </div>
                    </span>
                </template>
            </el-tree>
            <div v-if="loading" class="none_more">
                <el-icon><Loading /></el-icon>
            </div>
            <div v-if="noMore" class="none_more">-没有更多了-</div>
        </div>
        <div v-else class="empty_table">
            <img style="width: 50%" src="@/assets/imgs/logo/default.png" />
            <div class="empty-content">暂无行为数据</div>
        </div>
    </el-scrollbar>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import request from '@/request/index';
import { useRoute } from 'vue-router';
import { format } from '@/commons/utils';
const route = useRoute();

let params = {
    pageNum: 1,
    pageSize: 10,
    memberId: route.query.id
};
const defaultProps = {
    children: 'userBehaviour',
    label: 'date'
};
let loading = ref(false);
let total = ref(0);
const noMore = computed(() => Data.list.length >= total.value);
const disabled = computed(() => loading.value || noMore.value);
const Data = reactive({
    openDate: [],
    list: []
});
const load = () => {
    loading.value = true;
    params.pageNum++;
    queryBehaviorList();
};
const queryBehaviorList = async type => {
    const res = await request('memberBehaviourServ', params);
    const { list, totalCount } = res.data || {};
    total.value = totalCount || 0;
    if (list && list.length) {
        list.map(x => {
            Data.list.push(x);
        });
    }
    if (type && Data.list.length) {
        const arr = list.filter((x, idx) => {
            return idx < 2;
        });
        arr.map(e => {
            Data.openDate.push(e.date);
            expandNodes(e);
        });
    }
    loading.value = false;
};
const initBehaviorList = () => {
    loading.value = true;
    params.pageNum = 1;
    Data.list = [];
    Data.openDate = [];
    queryBehaviorList(1);
};
onMounted(() => {
    initBehaviorList();
});

const expandNodes = val => {
    val.down = true;
};
const collapseNodes = val => {
    val.down = false;
};
</script>

<style lang="scss" scoped>
.behavior {
    padding: 0 20px 0;
    height: calc(100vh - 238px);
    margin-top: 15px;
    // width: 400px;
    :deep(.el-tree-node__content) {
        height: auto;
        margin-bottom: 12px;
        white-space: pre-wrap;
    }
    :deep(.el-tree-node__expand-icon) {
        display: none;
        &.own {
            display: inline-block;
            margin-left: 5px;
        }
    }
    .date {
        font-size: 14px;
        font-weight: 500;
        color: #33302d;
        line-height: 14px;
    }
    .count {
        margin-left: 15px;
        font-size: 14px;
        color: #33302d;
        line-height: 14px;
    }
    .color_ff6 {
        color: #ff6b00;
    }
    .detail {
        display: flex;
        .time {
            font-size: 14px;
            color: #969696;
            line-height: 14px;
        }
        .content {
            margin-left: 15px;
            font-size: 14px;
            color: #33302d;
            margin-bottom: 5px;
        }
    }
    .none_more {
        font-size: 12px;
        color: #b5a8a8;
        text-align: center;
        width: 100%;
        line-height: 40px;
    }
    .empty_table {
        padding: 50px 25px;
        min-height: 300px;
        text-align: center;
        margin: auto;
        .empty-content {
            height: 20px;
            font-size: 13px;
            color: #969696;
            line-height: 20px;
        }
    }
}
</style>
